<template>
	<view class="All">
		<view class="hello">欢迎来到乐智出游</view>
		<view class="welcome">手机号注册/登录</view>
		<view class="phone">
			<input id="phone" class="phoneInput" type="digit" maxlength="11" 
			  placeholder="请输入手机号" placeholder-class="phonePlace" v-model="phone" />
		</view>
		<view class="phone">
			<input id="phone" class="phoneInput" type="digit" maxlength="11" 
			  placeholder="请输入验证码" placeholder-class="phonePlace" v-if="isShow" />
		</view>
		<view class="padding-tb-sm text-right next" @tap='gotologincode'><button class="button" :class="btnClass" >获取验证码</button></view>
		<view class="agree">
			<text class="agreeLeft">登录即同意</text>
			<text class="agreeRight" >《乐智出游用户协议》和《隐私政策》</text>
		</view>
		<view class="logoimg">
			<image class="logo"  src="../../static/icon/logo.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				isShow:false,
				//btnClass: 'line-gray'
			}
		},
		
		computed:{
			btnClass(){
				return this.phone.length===11?'bg-purple':'line-gray';
			}
		},
		methods: {
			gotologincode(){
				if(this.phone.length!==11)return;
				uni.navigateTo({
					url:'../loginCode/loginCode'
				})
			}
		}
	}
</script>

<style scoped>
	.All{
		width:100%;
		height:100vh;
		background:rgba(255,255,255,1);
		opacity:1;
		padding: 30px 30px 0;
	}
	.hello{
		padding-top: 10vh;
		font-size:60rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		opacity:1;
	}
	.welcome{
		padding-top: 2vh;
		font-size:16px;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(133, 136, 139, 1.0);
		opacity:1;
	}
	.phone{
		/* height: 5vh; */
		margin-top: 3vh;
		background-color: #dcdbdd;
		border-radius:60rpx ;
	}
	.phoneInput{
		height: 96rpx;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		opacity:1;
		text-align: center;
	}
	.phonePlace{
		font-size:40rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:#F8F8F8;
		opacity:1;
	}

	.agree{
		padding-top: 8vh;
		display: flex;
		justify-content: center;
	}
	.agreeLeft{
		height:17px;
		font-size:3rpx;
		font-family:PingFang SC;
		font-weight:500;
		line-height:17px;
		color:rgba(153,153,153,1);
		opacity:1;
	}
	.agreeRight{
		height:17px;
		font-size:15rpx;
		font-family:PingFang SC;
		font-weight:500;
		line-height:17px;
		color:rgba(153,153,153,1);
		opacity:1;
	}
	.button{
		height:96rpx;
		background:rgba(153,153,153,1);
		opacity:1;
		border-radius:44rpx;
		color: #FFFFFF;
		line-height: 96rpx;
	}
	.logo{
		width: 124rpx;
		height: 63rpx;
		
	}
	.logoimg{
		display: flex;
		justify-content: center;
		padding-top: 200rpx;
	}
	.bg-purple{
		background-color: #8563DC;
	}
	.line-gray{
		background-color: #999999;
	}
</style>
